<template>
  <el-dialog
    :title="alertInfo.title"
    :visible.sync="dialogVisible"
    :width="alertInfo.width"
    :show-close="false"
  >
    <div class="top-wrap">
      <i class="iconfont iconicon_succeed" />
      <h4 v-if="alertInfo.contentTitle" class="title-text">{{ alertInfo.contentTitle }}</h4>
    </div>
    <p class="desc-text">{{ countTime }}s {{ alertInfo.contentDesc }}</p>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="closeModal">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  props: {
    alertInfo: {
      type: Object,
      default: () => {
        return {
          width: '30%',
          contentTitle: '',
          contentDesc: ''
        }
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      countTime: 0
    }
  },
  mounted() {},
  methods: {
    countDownTimer(time = 4) {
      this.countTime = time
      const tricker = () => {
        this.countTime--
        if (this.countTime === 0) {
          this.dialogVisible = false
          clearInterval(handler)
          if (this.alertInfo.jumpUrl) {
            this.$router.push({ name: this.alertInfo.jumpUrl })
          }
        }
      }
      const handler = setInterval(tricker, 1000)
      tricker()
    },
    closeModal() {
      this.dialogVisible = false
      if (this.alertInfo.jumpUrl) {
        this.$router.push({ name: this.alertInfo.jumpUrl })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '@/assets/styles/mixin.scss';
  @import "@/assets/styles/variables.scss";

  ::v-deep .el-dialog__header{
    padding: 0;
    padding-bottom: 0;
  }
  .top-wrap{
    margin-bottom: 15px;
    @include flex(flex-start,center,row);
    .iconfont{
      margin-right: 16px;
      font-size: 30px;
      color: $green;
    }
    .title-text{
      font-size: 16px;
      color: $fontColor;
    }
  }
  .desc-text{
    margin-bottom: 2px;
    font-size: 13px;
    color: $fontColor;
    text-align: center;
  }
  .dialog-footer{
    margin-bottom: 10px;
    text-align: center;
    ::v-deep .el-button{
      padding: 10px 40px;
    }
  }

</style>

